<template>
  <div class="admin-dashboard">
    <!-- 侧边栏导航 -->
    <aside :class="['sidebar', { collapsed: isSidebarCollapsed }]">
      <div class="sidebar-header">
        <div class="logo-container">
          <svg class="logo" width="32" height="32" viewBox="0 0 24 24" fill="none">
            <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#3b82f6" stroke-width="2" stroke-linejoin="round"/>
            <path d="M2 17L12 22L22 17" stroke="#3b82f6" stroke-width="2" stroke-linejoin="round"/>
            <path d="M2 12L12 17L22 12" stroke="#3b82f6" stroke-width="2" stroke-linejoin="round"/>
          </svg>
          <h1 v-if="!isSidebarCollapsed" class="system-title">管理系统</h1>
        </div>
        <button class="sidebar-toggle" @click="toggleSidebar">
          <span class="toggle-icon">{{ isSidebarCollapsed ? '→' : '←' }}</span>
        </button>
      </div>
      
      <nav class="nav-menu">
        <a 
          v-for="menu in menuItems" 
          :key="menu.id"
          href="#"
          :class="['nav-item', { active: currentModule === menu.id }]"
          @click.prevent="switchModule(menu.id)"
          :title="isSidebarCollapsed ? menu.name : ''"
        >
          <span class="nav-icon" v-html="menu.icon_svg"></span>
          <span v-if="!isSidebarCollapsed" class="nav-text">{{ menu.name }}</span>
        </a>
      </nav>
      
      <div class="sidebar-footer">
        <a href="#" class="nav-item" @click.prevent="logout" :title="isSidebarCollapsed ? '退出登录' : ''">
          <span class="nav-icon" v-html="logoutIconSvg"></span>
          <span v-if="!isSidebarCollapsed" class="nav-text">退出登录</span>
        </a>
      </div>
    </aside>

    <!-- 主内容区域 -->
    <main class="main-content">
      <div class="content-wrapper">
        <CustomerManagement v-if="currentModule === 'customer'"/>
        <CardManagement v-if="currentModule === 'card'"/>
        <DepositManagement v-if="currentModule === 'deposit'"/>
        <TransactionManagement v-if="currentModule === 'transaction'"/>
        <div v-if="currentModule === 'dashboard'" class="dashboard-home">
          <h2 class="welcome-title">欢迎使用银行管理系统</h2>

          
          <div class="quick-actions">
            <h3>快速操作</h3>
            <div class="action-buttons">
              <button @click="switchModule('customer')" class="action-btn">
                <span class="action-icon">👥</span>
                客户管理
              </button>
              <button @click="switchModule('card')" class="action-btn">
                <span class="action-icon">💳</span>
                银行卡管理
              </button>
              <button @click="switchModule('deposit')" class="action-btn">
                <span class="action-icon">💰</span>
                存款管理
              </button>
              <button @click="switchModule('transaction')" class="action-btn">
                <span class="action-icon">📊</span>
                交易管理
              </button>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import CustomerManagement from './management/CustomerManagement.vue'
import CardManagement from './management/CardManagement.vue'
import DepositManagement from './management/DepositManagement.vue'
import TransactionManagement from './management/TransactionManagement.vue'
import ReportCenter from './management/ReportCenter.vue'

export default {
  name: 'AdminDashboard',
  components: {
    CustomerManagement,
    CardManagement,
    DepositManagement,
    TransactionManagement,
    ReportCenter
  },
  data() {
    return {
      currentModule: 'dashboard',
      isSidebarCollapsed: false,
      adminInfo: {
        name: '管理员'
      },
      stats: {
        customerCount: 1250,
        cardCount: 1890,
        totalDeposit: '125,680,000',
        todayTransactions: 156
      },
      menuItems: [
        { id: 'dashboard', name: '仪表板', icon_svg: '<svg>...</svg>' /* 替换为SVG */ },
        { id: 'customer', name: '客户管理', icon_svg: '<svg>...</svg>' },
        { id: 'card', name: '银行卡管理', icon_svg: '<svg>...</svg>' },
        { id: 'deposit', name: '存款管理', icon_svg: '<svg>...</svg>' },
        { id: 'transaction', name: '交易管理', icon_svg: '<svg>...</svg>' },
      ],
      logoutIconSvg: '<svg>...</svg>' // 退出图标
    }
  },
  methods: {
    switchModule(moduleId) {
      this.currentModule = moduleId
    },
    toggleSidebar() {
      this.isSidebarCollapsed = !this.isSidebarCollapsed;
    },
    logout() {
      if (confirm('确定要退出登录吗？')) {
        // 这里可以添加退出登录的逻辑
        this.$emit('logout')
      }
    }
  }
}
</script>

<style scoped>
/* --- 整体布局 --- */
.admin-dashboard {
  display: flex;
  height: 100vh;
  width: 100vw;
  background-color: #f8fafc;
  overflow: hidden;
}

/* --- 侧边栏 --- */
.sidebar {
  width: 260px;
  background-color: #ffffff;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
}
.sidebar.collapsed {
  width: 80px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}
.system-title {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}

.sidebar-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.nav-menu {
  flex-grow: 1;
  padding: 20px 0;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 25px;
  margin: 5px 15px;
  color: #4b5563;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.nav-item:hover {
  background-color: #f3f4f6;
  color: #111827;
}
.nav-item.active {
  background-color: #3b82f6;
  color: white;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 12px;
}

.nav-icon {
  width: 24px;
  height: 24px;
}
.nav-text {
  margin-left: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.sidebar-footer {
  padding: 20px 0;
  border-top: 1px solid #e5e7eb;
}

/* --- 主内容区 --- */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}

.content-wrapper {
  max-width: 100%;
  margin: 0 auto;
}

/* --- 响应式设计 --- */
@media (max-width: 768px) {
  .sidebar {
    position: absolute;
    left: -260px;
    z-index: 1000;
  }
  .sidebar.collapsed {
    left: 0;
    width: 260px; /* 在移动端展开时恢复宽度 */
  }
  /* 在移动端可能需要一个按钮来触发 isSidebarCollapsed */
}

/* 仪表板首页样式保持不变 */
.dashboard-home {
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-title {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 32px;
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  border-radius: 12px;
}

.stat-content h3 {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.quick-actions {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.quick-actions h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 20px 0;
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn:hover {
  background: #eff6ff;
  border-color: #2563eb;
  color: #2563eb;
}

.action-icon {
  font-size: 20px;
}
</style> 